<template>
  <div id="rqChar"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    setTimeout(() => {
      this.getChars();
    }, 200);
  },
  methods: {
    getChars() {
      var myChart = this.$echarts.init(document.getElementById("rqChar"));
      var yearData = [235, 8655, 2312, 4523, 3265, 4251, 1000, 5261, 2312, 1234, 3453, 1231];
      // 1. 实例化对象
      var option = {
        title: {
          text: "燃气情况监控",
          textStyle: {
            color: "#cbd7fa",
            fontSize: this.$fontSize(0.18) //字体大小
          }
        },
        // 加滚动条
        dataZoom: [
          {
            show: false,
            realtime: true,
            start: 0,
            end: 80
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 80
          }
        ],
        grid: {
          top: "20%",
          left: "10%",
          right: "3%",
          bottom: "20%",
          // show: true, // 显示边框
          borderColor: "#012f4a" // 边框颜色
          // containLabel: true // 包含刻度文字在内
        },
        // 通过这个color修改两条线的颜色
        color: ["#FF762D"],
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: this.$fontSize(0.18) //字体大小
          }
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
            textStyle: {
              color: "#FFFFFF",
              fontSize: this.$fontSize(0.18) //字体大小
            },
            interval: 0 //代表显示所有x轴标签显示
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
            textStyle: {
              color: "#FFFFFF",
              fontSize: this.$fontSize(0.18) //字体大小
            },
            interval: 0 //代表显示所有x轴标签显示
          },
          minInterval: 200,
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              width: 0, //设置线条粗细
              color: "#012f4a" // 分割线颜色
            }
          }
        },
        series: [
          {
            type: "line",
            // smooth: true,
            symbol: "circle", //设定为实心点
            symbolSize: 20, //设定实心点的大小
            data: yearData,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 8 //设置线条粗细
                }
              }
            },
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 1,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 118, 45, 1)"
                },
                {
                  offset: 1,
                  color: "rgba(255, 118, 45, 0)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            }
          }
        ]
      };
      var twChart = this.$echarts.init(document.getElementById("rqChar"));
      twChart.setOption(option);
      setTimeout(function() {
        window.onresize = function() {
          twChart.resize();
        };
      }, 200);
      myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>